<template>
  <div v-loading="addLoading" element-loading-background="rgba(255, 255, 255, 0.6)" element-loading-text="保存中,请稍候">
    <request-form
      :user-role="userRole"
      :title="title"
      :subTitle="subTitle"
      :offer-id="offerId"
      :creativeRequestData="dataList"
      :get-platform="getPlatform"
      :saveCache="saveCache"
      ref="addForm"
    ></request-form>
    <request-upload
      :product="false"
      :platform="platform"
      :offer-id="offerId"
      :title="title"
      :subTitle="subTitle"
      :creativeRequestData="dataList"
      :saveCache="saveCache"
      ref="upload"
    ></request-upload>
    <div class="btn-group">
      <el-button
        id="id-offer-componets-creativerequest-conmponents-request-add-submit"
        size="medium"
        style="margin-right: 20px"
        type="primary"
        @click="submit"
        >确定</el-button
      >
      <el-button id="id-offer-componets-creativerequest-conmponents-request-add-handlerClose"
                 :loading="addLoading" size="medium" @click="handlerClose">取消</el-button>
    </div>
  </div>
</template>

<script>
import requestForm from "./request-form";
import requestUpload from "./request-upload";
import {saveCreative} from "@/api/offer/creativerequest"
// import {getDetail as getOfferDetail} from "@/api/business/offer";


export default {
  name: "request-add",
  components: {
    requestForm,
    requestUpload,
  },
  props: {
    offerId: String,
    title: String,
    subTitle: String,
    userRole: Object,
    dataList: Object,
    close:Function,
  },
  data() {
    return {
      platform: "", //媒体
      addLoading: false,
      enableSaveCache: false,
    };
  },
  mounted() {
    if(this.title === 'add' && this.subTitle != 'copy') {
      this.loadCache();
      this.enableSaveCache = true;
    } else {
      this.enableSaveCache = true;
    }
  },
  methods: {
    /**
     * 提交
     */
    submit() {
      let flag = this.$refs.addForm.validateForm();
      let flagUplod = this.$refs.upload.validateForm();
      if (flag && flagUplod) {
        /*console.log(this.$refs.addForm.form)
        console.log(this.$refs.upload.$refs.upload[0].$refs.creativeUpload.uploadFiles)
        console.log(this.$refs.upload.form)*/

        try {
          if(!this.$refs.upload.$refs.upload[0].uploadCompleted()) {
            this.$message.warning('附件未上传完成');
            return;
          }
        } catch (error) {
        }

        this.addLoading = true
        this.enableSaveCache = false;
        this.clearCache();
        let files = this.$refs.upload.$refs.upload[0].getUploadFiles();
        let form = {
          creativeRequest: this.$refs.addForm.form,
          creativeRequestDetailList: this.$refs.upload.form.creativeRequestDetailList
        }
        form.creativeRequest.platform = form.creativeRequest.platform.join(",")
        form.creativeRequest.creativeType = form.creativeRequest.creativeType.join(",")
        console.log(form)
        saveCreative(form, files).then(() => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        }).finally(() => {
          this.handlerClose()
          this.addLoading = false
        })

      }
    },
    saveCache() {
      if(this.enableSaveCache) {
        let creativeRequest = this.$refs.addForm.form;
        let creativeRequestDetailList = this.$refs.upload.form.creativeRequestDetailList;
        let cacheInfo = {
          creativeRequest: creativeRequest,
          creativeRequestDetailList: creativeRequestDetailList,
        };
        let creativeRequestCache = window.localStorage.getItem('creativeRequestCache');
        let creativeRequestCacheObj = {};
        if(creativeRequestCache != null && creativeRequestCache != '') {
          creativeRequestCacheObj = JSON.parse(creativeRequestCache);
        }
        creativeRequestCacheObj[this.offerId] = cacheInfo;
        window.localStorage.setItem('creativeRequestCache',JSON.stringify(creativeRequestCacheObj));
      }
    },
    clearCache() {
      let creativeRequestCache = window.localStorage.getItem('creativeRequestCache');
      if(creativeRequestCache == null || creativeRequestCache == '') {
        return;
      }
      let creativeRequestCacheObj = JSON.parse(creativeRequestCache);
      delete creativeRequestCacheObj[this.offerId];
      window.localStorage.setItem('creativeRequestCache',JSON.stringify(creativeRequestCacheObj));
    },
    loadCache() {
      if(!this.enableSaveCache) {
        let creativeRequestCache = window.localStorage.getItem('creativeRequestCache');
        if(creativeRequestCache == null || creativeRequestCache == '') {
          return;
        }
        let creativeRequestCacheObj = JSON.parse(creativeRequestCache);
        let cacheInfo = creativeRequestCacheObj[this.offerId];
        if(cacheInfo != null) {
          this.$refs.addForm.form = cacheInfo.creativeRequest;
          this.$refs.upload.form.creativeRequestDetailList = cacheInfo.creativeRequestDetailList;
        }
      }
    },
    /**
     * 关闭
     */
    handlerClose() {
      this.close();
    },
    /**
     * 获取form表单选中的媒体
     */
    getPlatform(val) {
      this.platform = val;
    },
  },
};
</script>

<style scoped lang="scss">
  /deep/div.el-tabs__item.is-active {
    background-color: dodgerblue;
    color: white;
    border: 1px solid dodgerblue;
    border-radius: 10px;
  }
  /deep/div.el-tabs__item {
    border: 1px solid dodgerblue;
    border-radius: 10px;
    margin-right: 5px;
    text-align: center;
    padding-left: 20px!important;
    padding-right: 20px!important;
  }

.btn-group {
  display: flex;
  justify-content: center;
  padding: 2em 0;
}
</style>
